<template>
    <div class='imageshow-component-part'>
        <div v-if="imageList.length>0||imageObjList.length>0" class='center-part'>
            <!--用于普通的图片展示功能-->
            <!--v-if="imageList.length>0" -->
            <div v-for='(item ,index ) in imageList' class='show-img-part'>
                <img  v-on:click.stop="showPreviewClick(index)" class="img-list-part" :src="item">
                <span v-show="isShowDelLogo" class="delete-logo" @click='delete_img(index)'><img src="../assets/image_delete_icon.png"></span>
            </div>

            <!--用于七牛和微信图片操作展示和删除-->
            <!--v-else-if="imageObjList.length>0"-->
            <div  v-for='(item ,index ) in imageObjList' class='show-img-part'>
                <img v-if="item.imageType==='QiNiu'" v-on:click.stop="showPreviewClick(index)" class="img-list-part" :src="qiNiuUrl+item.imageUrl">
                <img v-else-if="item.imageType==='WeiXin'" v-on:click.stop="showPreviewClick(index)" class="img-list-part" :src="item.imageUrl">
                <span v-show="isShowDelLogo" class="delete-logo" @click='delete_img(index)'><img src="../assets/image_delete_icon.png"></span>
            </div>

            <div v-show="insideIsShowAddLogo" class='add-img-part'>
                <span><img class="add-img-logo" src="../assets/add_img.png"></span>
                <span class="add-img-title">上传图片</span>
                <input class="add-img-show" @change='add_img' type="file">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "imageShowComponent",
        data() {
            return {
                // insideImgs: [],
                insideIsShowAddLogo: false,
                checkAndroidOrIOS: '',
            }
        },
        props: {
            imageList: {
                type: Array,
                default() {
                    return []
                }
            },
            isShowAddLogo: {
                type: Boolean,
                default() {
                    return false
                }
            },
            isShowDelLogo: {
                type: Boolean,
                default() {
                    return false
                }
            },
            maxSize: {
                type: Number,
                default() {
                    return 9
                }
            },
            imageObjList: {
                type: Array,
                default() {
                    return []
                }
            },
            qiNiuUrl: {
                type: String,
                default() {
                    return ''
                }
            },
            isSliderScroll: {
                type: Boolean,
                default() {
                    return false
                }
            }
        },
        created() {
            this.insideIsShowAddLogo = this.isShowAddLogo;
            this.checkAppAndroidOrIOS();
        },
        methods: {
            delete_img(index){
                // this.imageList.splice(item,1);
                this.$emit('imageDeleteEvent',{index: index})
            },
            add_img(event){
                var reader = new FileReader();
                var img1=event.target.files[0];

                reader.readAsDataURL(img1);
                var that=this;
                reader.onloadend=function(){
                    that.imageList.push(reader.result);
                    if (that.imageList.length >= that.maxSize) {
                        that.insideIsShowAddLogo = false;
                    }
                }
            },
            galleryShowFunc(index,imgUrl) {
                let that = this;
                var gallery = weui.gallery(imgUrl,{
                    className: 'custom-classname',
                    onDelete: function () {
                        // if (confirm('确定删除该图片？')) {
                        //     console.log('删除');
                        // }
                        weui.confirm('确定删除该图片', {
                            title: '',
                            buttons: [{
                                label: '确认',
                                type: 'primary',
                                onClick: function () {
                                    gallery.hide(function () {
                                        console.log('`gallery` has been hidden');
                                        that.imageList.splice(index,1);
                                        that.$emit('imageHideEvent',{index: index});
                                    });
                                }
                            }, {
                                label: '取消',
                                type: 'default',
                                onClick: function () {

                                }
                            }]
                        });

                    }
                });
            },
            showPreviewClick(index) {
                let that = this;
                if (this.isSliderScroll) {
                    this.$router.push({name: 'imageShow',params: {
                            imageList: this.imageList,
                            index: index,
                        }
                    })
                } else {
                    if (this.imageList.length > 0) {
                        if (window.wxjs_is_wkwebview === true || this.checkAndroidOrIOS === 'ios') {
                            console.log('is ios getLocalImgData');
                            wx.getLocalImgData({
                                localId: that.imageList[index], // 图片的localID
                                success: function (res) {
                                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                    localData = localData.replace('jgp','jpeg');
                                    that.galleryShowFunc(index,localData);
                                }
                            });
                        } else {
                            this.galleryShowFunc(index,this.imageList[index]);
                        }

                        if (this.isShowDelLogo) {

                        } else {
                            document.querySelector('.weui-gallery__del').remove();
                        }
                    } else if (this.imageObjList.length > 0) {
                        if (this.imageObjList[index].imageType === 'QiNiu') {
                            this.galleryShowFunc(index,this.qiNiuUrl+this.imageObjList[index].imageUrl);
                            if (this.isShowDelLogo) {

                            } else {
                                document.querySelector('.weui-gallery__del').remove();
                            }
                        } else if (this.imageObjList[index].imageType === 'WeiXin') {
                            if (window.wxjs_is_wkwebview === true || this.checkAndroidOrIOS === 'ios') {
                                wx.getLocalImgData({
                                    localId: that.imageObjList[index].imageUrl, // 图片的localID
                                    success: function (res) {
                                        var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                        localData = localData.replace('jgp','jpeg');
                                        that.galleryShowFunc(index,localData);
                                    }
                                });
                            } else {
                                this.galleryShowFunc(index,this.imageObjList[index].imageUrl);
                            }
                            // this.galleryShowFunc(index,this.imageObjList[index].imageUrl);

                            if (this.isShowDelLogo) {

                            } else {
                                document.querySelector('.weui-gallery__del').remove();
                            }
                        }
                    }
                }
            },
            checkAppAndroidOrIOS() {
                // alert(navigator.userAgent);
                let ua = navigator.userAgent.toLowerCase();
                //android终端
                let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
                //ios终端
                let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

                if (isAndroid === true) {
                    this.checkAndroidOrIOS = 'Android';
                } else if (isiOS === true) {
                    this.checkAndroidOrIOS = 'ios';
                } else {
                    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                        // alert(navigator.userAgent);
                        this.checkAndroidOrIOS = 'ios';
                    } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
                        // alert(navigator.userAgent);
                        this.checkAndroidOrIOS = 'Android';
                    } else {//pc
                        this.checkAndroidOrIOS = 'none';
                    };
                }
                console.log('check android or ios');
                console.log(this.checkAndroidOrIOS);

                // this.$dialog.confirm({
                //     title: 'check android or ios',
                //     mes: this.checkAndroidOrIOS,
                //     opts: () => {}
                // });
            }
        },
    }
</script>

<style lang="scss">
    .imageshow-component-part {
        width: 100%;
        height: auto;
        background: #ffffff;

        .center-part {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
            height: auto;
            padding-top: 0.1rem;
            padding-bottom: 0.1rem;

            .show-img-part {
                position: relative;
                overflow: hidden;
                width: 1.8rem;
                height: 1.8rem;
                margin-right: 0.2rem;

                .img-list-part{
                    width: 1.8rem;
                    height: 1.8rem;
                    object-fit: cover;
                    padding-bottom: 0.1rem;
                }

                .delete-logo{
                    position: absolute;
                    width: auto;
                    height: auto;
                    right: 0;
                    top: 0;
                }
            }

            .add-img-part {
                display: flex;
                position: relative;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                width: 1.8rem;
                height: 1.8rem;
                border:1px solid #e1e1e1;

                .add-img-logo{
                    margin-top: 0.2rem;
                    width: 0.8rem;
                    height: 0.8rem;
                    overflow: hidden;
                }
                .add-img-title{
                    margin-bottom: 0.3rem;
                }

                .add-img-show{
                    position: absolute;
                    top: 0rem;
                    left: 0rem;
                    width: 100%;
                    height: 100%;
                    z-index: 99999;
                    opacity: 0;
                }
            }

        }
    }
</style>